<template>
	<view class="bond_detail">
		<view class='list' v-for="item in list" :key="item.changeTime">
		  <view class='side_left'>
		    <text class='title'>{{item.changeType}}</text>
		    <text class='balance'>
		      余额：<text class='balance_money'>￥{{item.blance}}</text>
		    </text>
		  </view>
		  <view class='side_right'>
		    <text class='trade'>{{item.changeAmount}}</text>
		    <text class='date'>{{item.changeTime}}</text>
		  </view>
		</view>
		<view class="empty" v-if="list.length === 0 && showData">
			<image class="icon" src="/static/images/empty.png"></image>
			暂无数据
		</view>
		<LoadingBar
			:update='updating'
			:refresh="refresh"
			:params="{pageSize: 18}"
			url="insuredetaillist"
			:list="list"
			@bind_list="bindList">
		</LoadingBar>
	</view>
</template>

<script>
	import LoadingBar from '@/common/components/loader/loadingBar/index.vue'
	export default {
		components: {
			LoadingBar
		},
		mounted() {
			this.refresh = !this.refresh
		},
		onReachBottom() {
		  this.updating = !this.updating;
		},
		data() {
			return {
				updating: false,
				refresh: false,
				showData: false,
				list: []
			}
		},
		methods: {
			bindList(list) {
				this.showData = true
				this.list = list
			}
		},
	}
</script>

<style>
	.bond_detail {
		background: #FFFFFF;
		min-height: 100vh;
	}
	
	.bond_detail .list {
	  border-top: 3upx solid #DEDEDE;
	  height: 120upx;
	  display: flex;
	  white-space: nowrap;
	  margin: 0upx 20upx;
	  font-size: 28upx;
	}
	.list:nth-child(1) {
		border: none;
	}
	.list .side_left {
	  width: 50%;
	  height: 100%;
	  display: flex;
	  justify-content: space-around;
	  flex-direction: column;
	  align-items: flex-start;
	}
	.list .side_left .title {
	  color: #666666;
	}
	.list .side_left .balance {
	  color: #999999;
	  font-size: 25upx;
	}
	.list .side_left .balance .balance_money {
	  color: #FC9C99;
	}
	.list .side_right {
	  width: 50%;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	  align-items: flex-end;
	}
	.list .side_right .trade {
	  color: #80C269;
	  font-size: 28upx;
	}
	.list .side_right .minus {
	  color: red;
	  font-size: 28upx;
	}
	.list .side_right .date {
	  color: #999999;
	  font-size: 20upx;
	}
	
	.bond_detail .empty {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #999999;
		font-size: 32upx;
		padding-bottom: 270upx;
		box-sizing: border-box;
	}
	.empty .icon {
		width: 300upx;
		height: 300upx;
		margin-bottom: 68upx;
	}
</style>
